<template>
<q-page padding>

  <div class="row flex justify-around">
    <div class="col-3">
      <q-select class="tw-w-full" label="省份" v-model="province" :options="province_options" />
    </div>
    <div class="col-3">
      <q-input label="年份" v-model="year" />
    </div>
    <div class="col-3">
      <q-btn label="确认" class="tw-mt-2" color="primary" @click="search()" />
    </div>
  </div>
  <div v-if="vis" class="tw-grid tw-grid-cols-3 tw-mt-20">
    <div>
      <span class="tw-text-2xl">危险性</span>
      <q-img :src="imgList[0]" />
    </div>
    <div>
      <span class="tw-text-2xl">暴露度</span>
      <q-img :src="imgList[1]" />
    </div>
    <div>
      <span class="tw-text-2xl">脆弱度</span>
      <q-img :src="imgList[2]" />
    </div>
  </div>
</q-page>
</template>

<script setup>
import { api } from 'src/boot/api'
import { ref } from 'vue'
let year = ref(2019)

let vis = ref(false)
let confirm = ()=>{
  setTimeout(()=>{
    vis.value = true
  },2000)
}
let province = ref("山西");
let province_options = ref([
  "北京市",
  "天津市",
  "上海市",
  "重庆市",
  "河北省",
  "山西省",
  "辽宁省",
  "吉林省",
  "黑龙江省",
  "江苏省",
  "浙江省",
  "安徽省",
  "福建省",
  "江西省",
  "山东省",
  "河南省",
  "湖北省",
  "湖南省",
  "广东省",
  "海南省",
  "四川省",
  "贵州省",
  "云南省",
  "陕西省",
  "甘肃省",
  "青海省",
  "台湾省",
  "内蒙古自治区",
  "广西壮族自治区",
  "西藏自治区",
  "宁夏回族自治区",
  "新疆维吾尔自治区",
  "香港特别行政区",
  "澳门特别行政区"
]);

let imgList = ref([
  '/2.png',
  '/3.png',
  '/4.png'
])

let search = () =>{
  let formData = new FormData();
  formData.append("province",province.value)
  formData.append("year",year.value)
  api({
    method: 'post',
    url: '/risk',
    data: formData,
  }).then((res)=>{
    imgList.value = res.data.data 
    vis.value = true
  })



}


</script>

<style scoped>

</style>
